<template>
  <basic-container>
    <el-button link icon="Back" @click="back">返回</el-button>
    <br/><br/>
    <avue-crud ref="crudRef"
               :option="option"
               v-model:search="search"
               v-model:page="page"
               v-model="form"
               :data="data"
               @rowSave="rowSave"
               @rowDel="rowDel"
               @row-update="rowUpdate"
    >

    </avue-crud>
  </basic-container>
</template>

<script setup>
//证书免考设置
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { getList,save ,del,update} from '@/api/position/cerExempt';
import { ElMessageBox, ElNotification } from 'element-plus';

const props = defineProps({
  certificateId:String
})
const emits = defineEmits(['back'])
const crudRef = ref();
const positionSequenceNameData = ref([]);

const column = reactive([
  {
    label: '队伍',
    display:false,
    prop: 'teamName'
  },
  {
    label: '队伍',
    prop: 'teamId',
    hide:true,
    type: 'select',
    cascader: ['sequenceId'],
    props: {
      label: 'name',
      value: 'id'
    },
    dicUrl: '/api/position/team/listNoPage',
    rules: [
      {
        required: true,
        message: '请选择队伍',
      },
    ],
  },
  {
    label: '序列',
    display:false,
    prop: 'sequenceName'
  },
  {
    label: '序列',
    prop: 'sequenceId',
    hide:true,
    type: 'select',
    cascader: ['positionSequenceId'],
    props: {
      label: 'name',
      value: 'id'
    },
    dicUrl: '/position/sequence/listByTeamId?teamId={{key}}',
    rules: [
      {
        required: true,
        message: '请选择序列',
      },
    ],
  },
  {
    label: '岗位序列',
    display:false,
    prop: 'positionSequenceName'
  },
  {
    label: '岗位序列',
    prop: 'positionSequenceId',
    hide:true,
    type: 'select',
    props: {
      label: 'name',
      value: 'id'
    },
    dicUrl: '/api/position/positionInstance/getMap?sequenceId={{key}}',
    rules: [
      {
        required: true,
        message: '请选择岗位序列',
      },
    ],
    dicFormatter(res) {
      positionSequenceNameData.value = res.data;
      let { modelValue } = crudRef.value.getPropRef('positionSequenceId')
      if(modelValue){
        const a =  res.data.find(x => x.id == modelValue);
        if (a) {
          column[8].dicData = a.children;
        }else{
          column[8].dicData  =[]
        }
      }
      return res.data;
    },
    control(val, form) {
      const a = positionSequenceNameData.value.find(x => x.id == val);
      if (a) {
        column[8].dicData = a.children;
      }else{
        column[8].dicData  =[]
      }
    }
  },
  {
    label: '岗位或方向',
    display:false,
    prop: 'positionName'
  },
  {
    label: '岗位或方向',
    display:false,
    hide:true,
    prop: 'positionId'
  },
  {
    label: '岗位或方向',
    prop: '_positionId',
    hide:true,
    type: 'cascader',
    props: {
      label: 'name',
      value: 'id'
    },
    dicData: [],
    rules: [
      {
        required: true,
        message: '请选择岗位或方向',
      },
    ],
    control(val){
      if(val) {
        setTimeout(()=>{
          crudRef.value.validateField('_positionId')
        })
      }
      // console.log('1111111',toRaw( val))
    }
  },
  {
    label: '知识类型',
    display:false,
    prop: 'knowledgeClassificationName'
  },
  {
    label: '知识类型',
    prop: 'knowledgeClassificationId',
    hide:true,
    type:'select',
    dicUrl: '/api/position/knowledgeClassification/list',
    props: {
      label: 'name',
      value: 'id'
    },
    rules: [
      {
        required: true,
        message: '请选择知识类型',
      },
    ],
    dicFormatter(res){
      return res.data.records
    }
  }
]);
const option = computed(() => {
  return {
    border:true,
    column
  };
});
const search = ref({});
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
const form = ref({});
const data = ref([]);

const back = ()=>{
  emits('back')
}
const getEditData = (row)=>{
  let teamName = crudRef.value.tableForm['$teamId']//getPropName('teamId')
  let sequenceName = crudRef.value.tableForm['$sequenceId']
  let positionSequenceName = crudRef.value.tableForm['$positionSequenceId']
  let knowledgeClassificationName = crudRef.value.tableForm['$knowledgeClassificationId']
  let _positionId = crudRef.value.tableForm['_positionId']
  let positionId = _positionId[ _positionId.length - 1 ]
  let $_positionId = crudRef.value.tableForm['$_positionId']
  let positionName = $_positionId.split(' | ')[ _positionId.length - 1 ]
  return {
    ...row,
    teamName,
    sequenceName,
    positionSequenceName,
    knowledgeClassificationName,
    positionName,
    positionId,
    certificateId:props.certificateId
  }
}
const rowSave = (row, done) =>{
  const subData = getEditData(row)
  save(subData).then(()=>{
    page.value.currentPage=1
    ElNotification.success('添加成功')
    getDataList();
    done()
  })

}
const rowDel = (row,index)=>{
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    page.value.currentPage=1
    del(row.id).then(()=>{
      ElNotification.success('删除成功')
      page.value.currentPage=1
      getDataList()
    })
  })
}
const getDataList =()=>{
  getList(page.value.currentPage, page.value.pageSize, {certificateId:props.certificateId}).then(res => {
    data.value = res.data.data.records;
    page.value.total = res.data.data.total;
  });
}
const rowUpdate = (row,index,done,loading)=>{
  const subData = getEditData(row)
  update(subData).then(()=>{
    ElNotification.success('修改成功')
    page.value.currentPage=1
    getDataList()
    done()
  })
}
const beforeOpen=(done,type)=>{
  if(type==='edit'){

  }
  done();
}
onMounted(() => {
  getDataList()
});
</script>

<style scoped>

</style>
<script setup>
</script>